iT邦幫忙

2021 iThome 鐵人賽

DAY 16
0
Modern Web

我的菜很有Vue味~系列 第 16

Day16 Vue directives(v-model資料雙向綁定)

  • 分享至 

  • xImage
  •  

在Vue裡有個很大的特色可能就是資料的雙向綁定(Two-wayBinding),而資料綁定的話我們最常適用的屬性就是v-model
v-model常用於表單和元素來做雙向數據綁定,結合其他樣板指令 v-bindv-on一樣,除了初始綁定與呈現資料外,還會監聽事件來做資料更新。

我們先在v-model裡綁定message,並用p把message呈現出來,因為依v-model屬性的功能我改變message改變的話p裡的內容也會被改變。

原先呈現的結果。

修改內容後內容當然也會改變。

v-model修飾符介紹

.lazy

lazy修飾符,通常在訊息被改變時不會馬上更動,而是在離開輸入攔時才會改動內容。

.number

number的話就是將輸入的內容轉化成數字,就這麼簡單明瞭。

.trim

trim的話,應該會蠻常使用的,它的功能就是過濾到空白元素,有時候會有人按一堆空白,這就可以吧空白的地方過濾掉喔。

今天就先到這了,明天見~


上一篇
Day15 Vue directives(v-for)下
下一篇
Day17 Vue Component(元件)
系列文
我的菜很有Vue味~30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言